HTML Basic - 基础知识

Sue-52 2022-03-31 00:00:00 HTML5 前端知识点 HTML5

HTML Basic - 基础知识

目标：
认识 html 元素
html 属性
html 头部
html 标题

1. 认识 html 元素

开始标签	元素内容	结束标签
`<p>`	段落	`</p>`
`<div>`	块级元素	`</div>`
`<span>`	子元素	`</span>`

开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。

1.1 元素基本语法

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素内容时位于开始标签和结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行闭合（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

1.2 Html 嵌套

大多数 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）。

HTML 文档由相互嵌套的 HTML 元素构成。

1.3 HTML 文档实例

<!DOCTYPE html>
<html>

<body>
<p>这是第一个段落。</p>
</body>

</html>

1
2
3
4
5
6
7
8

以上实例包含了三个 HTML 元素。

1.4 HTML 实例解析

<p> 元素:

<p>这是第一个段落。</p>

这个 <p> 元素定义了 HTML 文档中的一个段落。

这个元素拥有一个开始标签 <p> 以及一个结束标签 </p>.

<body> 元素:

<body>
<p>这是第一个段落。</p>
</body>

1
2
3

<body> 元素定义了 HTML 文档的主体。

这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。

<html> 元素：

<html>

<body>
<p>这是第一个段落。</p>
</body>

</html>

1
2
3
4
5
6
7

<html> 元素定义了整个 HTML 文档。

这个元素拥有一个开始标签 <html> ，以及一个结束标签 </html>.

2. html 属性

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name="value"。

2.1 属性示例

<div class="div" id="box"> Div </div>

注意：属性和属性值对大小写不敏感，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。

3. html 头部

3.1 `<head>` 元素

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 
    meta 文档级元数据元素 
      - name: 元数据的名称
      - content: 元数据的值
      - charset: 字符集
  -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- title 标题 -->
  <title>html Head 描述</title>
  <!-- CSS 样式部分 -->
  <style></style>
  <!-- 
    link 引入全局文件
      - rel: 描述文件引入类型
      - href: 文件路径  
  -->
  <link rel="stylesheet" href="">
  <!-- script 用于书写 JS 代码, 也可以src引入JS文件 -->
  <script src=""></script>
  <!-- noscript 如果页面上的脚本类型不受支持或者当前在浏览器中关闭了脚本，则在 HTML <noscript> 元素中定义脚本未被执行时的替代内容。 -->
  <noscript></noscript>
</head>

<body>

</body>

</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

标签	描述
`<head>`	HTML head 元素规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。
`<title>`	HTML `<title>` 元素定义文档的标题，显示在Browser的标题栏或标签页上。它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略。题
`<base>`	HTML `<base>` 元素指定用于一个文档中包含的所有相对 URL 的根 URL。一份中只能有一个 `<base>` 元素。
`<link>`	HTML 外部资源链接元素 (`<link>`) 规定了当前文档与外部资源的关系。该元素最常用于链接样式表，此外也可以被用来创建站点图标 (比如 PC 端的 “favicon” 图标和移动设备上用以显示在主屏幕的图标) 。
`<meta>`	HTML `<meta>` 元素表示那些不能由其它 HTML 元相关（meta-related）元素(base、link, script、style 或 title）之一表示的任何Metadata信息。
`<script>`	定义了客户端的脚本文件
`<style>`	HTML 的`<style>`元素包含文档的样式信息或者文档的部分内容。默认情况下，该标签的样式信息通常是CSS的格式。

4. html 标题

标题（Heading）是通过 <h1> - <h6> 标签进行定义的。

<h1> 定义最大的标题。 <h6> 定义最小的标题。

请确保将 HTML 标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>一级标题</h1>
  <h2>二级标题</h2>
  <h3>三级标题</h3>
  <h4>四级标题</h4>
  <h5>五级标题</h5>
  <h6>六级标题</h6>
</body>

</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

4.1 html 注释

<!-- 这是一个注释 -->

开始括号之后（左边的括号）需要紧跟一个叹号 ! (英文标点符号)，结束括号之前（右边的括号）不需要。

HTML Basic - 基础知识